﻿<!DOCTYPE html>
<html x-data="main" class :class="[$store.app.mode]">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Premium Tailwind CSS Admin & Dashboard Template" />
    <meta name="author" content="SRBThemes" />

    <title>QimenIDC - 控制中心</title>

    

    <link rel="stylesheet" type="text/css" media="screen" href="assets/css/perfect-scrollbar.min.css" />

    <link rel="stylesheet" type="text/css" media="screen" href="assets/css/style.css" />
</head>
<body x-data="main" class="collapse-menu overflow-x-hidden bg-lightwhite font-public text-base font-normal text-slate-600 antialiased dark:bg-darkblue dark:text-indigo-300" :class="[ $store.app.sidebar ? 'toggle-sidebar' : '', $store.app.fullscreen ? '' : '']">

    <div x-cloak class="fixed inset-0 z-40 bg-slate-800/50 lg:hidden" :class="{'hidden' : !$store.app.sidebar}" @click="$store.app.toggleSidebar()"></div>


    <div>
        <div class="flex min-h-screen w-full items-stretch">

            <nav class="sidebar">
                <div class="brand-logo">
                    <a href="index.html" class="flex items-center">
                        <div class="block min-h-[1px] shrink-0 grow-0 overflow-hidden leading-none">
                            <svg width="42" height="35" viewbox="0 0 42 35" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M36.5688 1.64243L36.3926 1.42819C36.0453 1.00627 35.6135 0.661729 35.125 0.416736C34.6365 0.171743 34.1022 0.031728 33.5563 0.00568853C33.0105 -0.0203509 32.4652 0.0681618 31.9556 0.265543C31.446 0.462925 30.9834 0.764794 30.5975 1.15173L30.0792 1.66662L28.1544 3.59484C30.1725 2.98666 31.9867 3.41861 32.9923 4.51403C33.0959 4.64188 33.2031 4.76628 33.3033 4.90105C35.075 7.27331 36.1518 10.0917 36.4132 13.041C36.6746 15.9902 36.1103 18.9541 34.7835 21.601C33.4567 24.2479 31.4197 26.4735 28.9003 28.0288C26.3809 29.5841 23.4784 30.4079 20.5176 30.4079C17.5568 30.4079 14.6543 29.5841 12.1349 28.0288C9.61545 26.4735 7.57842 24.2479 6.25161 21.601C4.92481 18.9541 4.36057 15.9902 4.622 13.041C4.88342 10.0917 5.9602 7.27331 7.7319 4.90105C7.83211 4.76628 7.94268 4.63843 8.04635 4.50712C9.08303 3.41861 10.8765 2.98666 12.8842 3.59484L10.9594 1.66662L10.4687 1.15173C10.0833 0.764958 9.62133 0.463068 9.11235 0.265448C8.60336 0.067829 8.05868 -0.0211498 7.51327 0.00423323C6.96786 0.0296162 6.43379 0.168796 5.94537 0.412834C5.45694 0.656872 5.02494 1.00037 4.67715 1.42127L4.49745 1.64243C2.08193 4.6628 0.568539 8.30397 0.131521 12.1467C-0.305497 15.9894 0.351646 19.8774 2.02727 23.363C3.70289 26.8487 6.32885 29.7902 9.60282 31.849C12.8768 33.9077 16.6657 35 20.5331 35C24.4006 35 28.1895 33.9077 31.4634 31.849C34.7374 29.7902 37.3634 26.8487 39.039 23.363C40.7146 19.8774 41.3718 15.9894 40.9347 12.1467C40.4977 8.30397 38.9843 4.6628 36.5688 1.64243Z" fill="url(#paint0_linear_39_54)" />
                                <path d="M31.3439 13.661C31.3439 11.9609 30.8118 11.5151 31.3716 9.65253C31.3716 9.65253 30.5975 10.4197 30.5975 10.4162L29.9617 11.059C29.7683 11.2605 29.6275 11.5064 29.5516 11.7752C29.4757 12.0439 29.467 12.3272 29.5263 12.6001C29.6473 13.2043 29.7086 13.8189 29.7094 14.4351C29.7097 15.7187 29.4407 16.9882 28.9196 18.1613C28.3985 19.3345 27.6371 20.3852 26.6845 21.2457C25.7319 22.1061 24.6093 22.757 23.3893 23.1564C22.1694 23.5558 20.8792 23.6947 19.6022 23.5642C18.3252 23.4337 17.0897 23.0367 15.9758 22.3988C14.8618 21.761 13.8941 20.8964 13.1352 19.8611C12.3763 18.8258 11.8431 17.6427 11.5701 16.3884C11.2971 15.1341 11.2904 13.8365 11.5503 12.5794C11.6101 12.313 11.6022 12.0359 11.5274 11.7733C11.4525 11.5107 11.3131 11.2711 11.1218 11.0762L10.4687 10.437L9.69812 9.66635C10.2545 11.5289 9.6981 11.9747 9.72575 13.6748C9.70847 13.9306 9.69812 14.1897 9.69812 14.4523C9.74884 17.2925 10.9127 19.9991 12.9391 21.9897C14.9655 23.9802 17.6926 25.0956 20.5331 25.0956C23.3737 25.0956 26.1007 23.9802 28.1271 21.9897C30.1536 19.9991 31.3174 17.2925 31.3681 14.4523C31.3681 14.1897 31.3681 13.9306 31.337 13.6748L31.3439 13.661Z" fill="#7B3AED" />
                                <path d="M31.3232 6.88801C30.2658 7.54457 29.1739 7.77609 28.4482 7.04696C28.2685 6.85345 28.0819 6.6634 27.8849 6.48371C27.5153 6.14767 27.0304 5.96699 26.531 5.97922C26.0316 5.99145 25.5561 6.19564 25.2034 6.54937L21.8031 9.94967C21.0255 10.7551 20.5738 11.8199 20.5349 12.9388C20.496 11.8199 20.0442 10.7551 19.2667 9.94967L15.8733 6.55282C15.5204 6.19808 15.0442 5.99326 14.544 5.98102C14.0438 5.96879 13.5581 6.1501 13.1883 6.48716C12.9913 6.66685 12.8047 6.85691 12.625 7.05388C11.8959 7.78301 10.8039 7.55149 9.74652 6.89493L11.3326 8.48104L11.4363 8.58471L12.6458 9.7907L16.8409 13.9893C18.4304 15.5823 20.0546 17.4068 20.5349 19.3523C21.0152 17.4068 22.6393 15.5823 24.2324 13.9893L28.4378 9.78034L28.6728 9.54536L29.744 8.47413L31.3232 6.88801Z" fill="url(#paint1_linear_39_54)" />
                                <defs>
                                    <lineargradient id="paint0_linear_39_54" x1="38.0882" y1="9.72784e-08" x2="6.86275" y2="30.8824" gradientunits="userSpaceOnUse">
                                        <stop stop-color="#7B3AED" />
                                        <stop offset="1" stop-color="#4F46E5" />
                                    </lineargradient>
                                    <lineargradient id="paint1_linear_39_54" x1="36.0294" y1="-0.686275" x2="5.49023" y2="29.1667" gradientunits="userSpaceOnUse">
                                        <stop stop-color="#7B3AED" />
                                        <stop offset="1" stop-color="#4F46E5" />
                                    </lineargradient>
                                </defs>
                            </svg>
                        </div>
                        <p class="ml-2 shrink-0 text-2xl font-bold -tracking-[0.5px] text-slate-600 opacity-100 transition-opacity duration-1000 dark:text-indigo-100">QimenIDC</p>
                    </a>
                    <a href="javascript:;" @click="$store.app.toggleSidebar()" class="sidebar-toggle">
                        <svg class="align-middle text-white transition-all duration-300" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="currentcolor">
                            <path d="M13.293 6.293 7.586 12l5.707 5.707 1.414-1.414L10.414 12l4.293-4.293z"></path>
                        </svg>
                    </a>
                </div>

                <ul class="perfect-scrollbar menu-sidebar py-1" x-data="{ activeMenu: 'dashboard' }">
                    <li class="menu-item" :class="{'active' : activeMenu === 'dashboard'}">
                        <a href="javascript:void(0);" class="menu-link" @click="activeMenu === 'dashboard' ? activeMenu = null : activeMenu = 'dashboard'">
                            <svg xmlns="http://www.w3.org/2000/svg" class="menu-icon" width="20" height="20" fill="currentcolor" viewbox="0 0 256 256">
                                <path d="M240,208H224V115.55a16,16,0,0,0-5.17-11.78l-80-75.48a1.14,1.14,0,0,1-.11-.11,16,16,0,0,0-21.53,0l-.11.11L37.17,103.77A16,16,0,0,0,32,115.55V208H16a8,8,0,0,0,0,16H240a8,8,0,0,0,0-16ZM48,115.55l.11-.1L128,40l79.9,75.43.11.1V208H160V160a16,16,0,0,0-16-16H112a16,16,0,0,0-16,16v48H48ZM144,208H112V160h32Z"></path>
                            </svg>
                            <p>控制中心</p>
                        </a>
                    </li>
                    <li class="menu-title">
                        <span>业务管理</span>
                    </li>
                    <li class="menu-item" :class="{'active' : activeMenu === 'chat'}">
                        <a href="chats.html" class="menu-link" @click="activeMenu === 'chat' ? activeMenu = null : activeMenu = 'chat'">
                            <svg xmlns="http://www.w3.org/2000/svg" class="menu-icon" width="20" height="20" fill="currentcolor" viewbox="0 0 256 256">
                                <path d="M216,80H184V48a16,16,0,0,0-16-16H40A16,16,0,0,0,24,48V176a8,8,0,0,0,13,6.22L72,154V184a16,16,0,0,0,16,16h93.59L219,230.22a8,8,0,0,0,5,1.78,8,8,0,0,0,8-8V96A16,16,0,0,0,216,80ZM66.55,137.78,40,159.25V48H168v88H71.58A8,8,0,0,0,66.55,137.78ZM216,207.25l-26.55-21.47a8,8,0,0,0-5-1.78H88V152h80a16,16,0,0,0,16-16V96h32Z"></path>
                            </svg>
                            <p>实例管理</p>
                        </a>
                    </li>
                    <li class="menu-item" :class="{'active' : activeMenu === 'email'}">
                        <a href="email.html" class="menu-link" @click="activeMenu === 'email' ? activeMenu = null : activeMenu = 'email'">
                            <svg xmlns="http://www.w3.org/2000/svg" class="menu-icon" width="20" height="20" fill="currentcolor" viewbox="0 0 256 256">
                                <path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48ZM203.43,64,128,133.15,52.57,64ZM216,192H40V74.19l82.59,75.71a8,8,0,0,0,10.82,0L216,74.19V192Z"></path>
                            </svg>
                            <p>实例模板</p>
                        </a>
                    </li>
                    
                    <li class="menu-title">
                        <span>宿主机管理</span>
                    </li>
                    <li class="menu-item" :class="{'active' : activeMenu === 'cards'}">
                        <a href="javascript:void(0);" class="menu-link" @click="activeMenu === 'cards' ? activeMenu = null : activeMenu = 'cards'">
                            <svg xmlns="http://www.w3.org/2000/svg" class="menu-icon" width="20" height="20" fill="currentcolor" viewbox="0 0 256 256">
                                <path d="M184,72H40A16,16,0,0,0,24,88V200a16,16,0,0,0,16,16H184a16,16,0,0,0,16-16V88A16,16,0,0,0,184,72Zm0,128H40V88H184V200ZM232,56V176a8,8,0,0,1-16,0V56H64a8,8,0,0,1,0-16H216A16,16,0,0,1,232,56Z"></path>
                            </svg>
                            <p>节点管理</p>
                        </a>
                    </li>
                    <li class="menu-item" :class="{'active' : activeMenu === 'userinterface'}">
                        <a href="javascript:void(0);" class="menu-link menu-toggle" @click="activeMenu === 'userinterface' ? activeMenu = null : activeMenu = 'userinterface'">
                            <svg xmlns="http://www.w3.org/2000/svg" class="menu-icon" width="20" height="20" fill="currentcolor" viewbox="0 0 256 256">
                                <path d="M224,48H32A16,16,0,0,0,16,64V88a16,16,0,0,0,16,16v88a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V104a16,16,0,0,0,16-16V64A16,16,0,0,0,224,48ZM208,192H48V104H208ZM224,88H32V64H224V88ZM96,136a8,8,0,0,1,8-8h48a8,8,0,0,1,0,16H104A8,8,0,0,1,96,136Z"></path>
                            </svg>
                            <p>IP池管理</p>
                        </a>
                        <ul class="menu-sub" x-cloak x-show="activeMenu === 'userinterface'" x-collapse>
                            <li class="menu-item">
                                <a href="accordion.html" class="menu-link">
                                    <p>IPV4管理</p>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="alerts.html" class="menu-link">
                                    <p>IPV6管理</p>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="menu-item" :class="{'active' : activeMenu === 'exrendedui'}">
                        <a href="javascript:void(0);" class="menu-link menu-toggle" @click="activeMenu === 'exrendedui' ? activeMenu = null : activeMenu = 'exrendedui'">
                            <svg xmlns="http://www.w3.org/2000/svg" class="menu-icon" width="20" height="20" fill="currentcolor" viewbox="0 0 256 256">
                                <path d="M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z"></path>
                            </svg>
                            <p>镜像管理</p>
                        </a>
                        <ul class="menu-sub" x-cloak x-show="activeMenu === 'exrendedui'" x-collapse>
                            
                            <li class="menu-item">
                                <a href="dragandDrop.html" class="menu-link">
                                    <p>ISO管理</p>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="avatar.html" class="menu-link">
                                    <p>Cloud Images管理</p>
                                </a>
                            </li>
                        </ul>
                    </li>
                
                    <li class="menu-title">
                        <span>系统管理</span>
                    </li>
                    <li class="menu-item" :class="{'active' : activeMenu === 'formelements'}">
                        <a href="javascript:void(0);" class="menu-link" @click="activeMenu === 'formelements' ? activeMenu = null : activeMenu = 'formelements'">
                            <svg xmlns="http://www.w3.org/2000/svg" class="menu-icon" width="20" height="20" fill="currentcolor" viewbox="0 0 256 256">
                                <path d="M88,96a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H96A8,8,0,0,1,88,96Zm8,40h64a8,8,0,0,0,0-16H96a8,8,0,0,0,0,16Zm32,16H96a8,8,0,0,0,0,16h32a8,8,0,0,0,0-16ZM224,48V156.69A15.86,15.86,0,0,1,219.31,168L168,219.31A15.86,15.86,0,0,1,156.69,224H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32H208A16,16,0,0,1,224,48ZM48,208H152V160a8,8,0,0,1,8-8h48V48H48Zm120-40v28.7L196.69,168Z"></path>
                            </svg>
                            <p>系统设置</p>
                        </a>
                        
                    </li>
                    <li class="menu-item" :class="{'active' : activeMenu === 'formwizard'}">
                        <a href="javascript:void(0);" class="menu-link" @click="activeMenu === 'formwizard' ? activeMenu = null : activeMenu = 'formwizard'">
                            <svg xmlns="http://www.w3.org/2000/svg" class="menu-icon" width="20" height="20" fill="currentcolor" viewbox="0 0 256 256">
                                <path d="M88,96a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H96A8,8,0,0,1,88,96Zm8,40h64a8,8,0,0,0,0-16H96a8,8,0,0,0,0,16Zm32,16H96a8,8,0,0,0,0,16h32a8,8,0,0,0,0-16ZM224,48V156.69A15.86,15.86,0,0,1,219.31,168L168,219.31A15.86,15.86,0,0,1,156.69,224H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32H208A16,16,0,0,1,224,48ZM48,208H152V160a8,8,0,0,1,8-8h48V48H48Zm120-40v28.7L196.69,168Z"></path>
                            </svg>
                            <p>管理员</p>
                        </a>
                        
                    </li>
                    <li class="menu-item" :class="{'active' : activeMenu === 'formvalidation'}">
                        <a href="form-validation.html" class="menu-link" @click="activeMenu === 'formvalidation' ? activeMenu = null : activeMenu = 'formvalidation'">
                            <svg xmlns="http://www.w3.org/2000/svg" class="menu-icon" width="20" height="20" fill="currentcolor" viewbox="0 0 256 256">
                                <path d="M168,152a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,152Zm-8-40H96a8,8,0,0,0,0,16h64a8,8,0,0,0,0-16Zm56-64V216a16,16,0,0,1-16,16H56a16,16,0,0,1-16-16V48A16,16,0,0,1,56,32H92.26a47.92,47.92,0,0,1,71.48,0H200A16,16,0,0,1,216,48ZM96,64h64a32,32,0,0,0-64,0ZM200,48H173.25A47.93,47.93,0,0,1,176,64v8a8,8,0,0,1-8,8H88a8,8,0,0,1-8-8V64a47.93,47.93,0,0,1,2.75-16H56V216H200Z"></path>
                            </svg>
                            <p>关于系统</p>
                        </a>
                    </li>
                    
                    <li class="menu-title">
                        <span>自动化与日志</span>
                    </li>
                    <li class="menu-item" :class="{'active' : activeMenu === 'authentication'}">
                        <a href="javascript:void(0);" class="menu-link menu-toggle" @click="activeMenu === 'authentication' ? activeMenu = null : activeMenu = 'authentication'">
                            <svg xmlns="http://www.w3.org/2000/svg" class="menu-icon" width="20" height="20" fill="currentcolor" viewbox="0 0 256 256">
                                <path d="M208,80H96V56a32,32,0,0,1,32-32c15.37,0,29.2,11,32.16,25.59a8,8,0,0,0,15.68-3.18C171.32,24.15,151.2,8,128,8A48.05,48.05,0,0,0,80,56V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80ZM48,128H208v16H48Zm0,32H208v16H48ZM208,96v16H48V96Zm0,112H48V192H208v16Z"></path>
                            </svg>
                            <p>日志管理</p>
                        </a>
                        <ul class="menu-sub" x-cloak x-show="activeMenu === 'authentication'" x-collapse>
                            <li class="menu-item">
                                <a href="#" target="_blank" class="menu-link">
                                    <p>系统日志</p>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="#" target="_blank" class="menu-link">
                                    <p>登录日志</p>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="#" target="_blank" class="menu-link">
                                    <p>日志设置</p>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="menu-item" :class="{'active' : activeMenu === 'Charts'}">
                        <a href="javascript:void(0);" class="menu-link" @click="activeMenu === 'Charts' ? activeMenu = null : activeMenu = 'Charts'">
                            <svg xmlns="http://www.w3.org/2000/svg" class="menu-icon" width="20" height="20" fill="currentcolor" viewbox="0 0 256 256">
                                <path d="M232,208a8,8,0,0,1-8,8H32a8,8,0,0,1-8-8V48a8,8,0,0,1,16,0v94.37L90.73,98a8,8,0,0,1,10.07-.38l58.81,44.11L218.73,90a8,8,0,1,1,10.54,12l-64,56a8,8,0,0,1-10.07.38L96.39,114.29,40,163.63V200H224A8,8,0,0,1,232,208Z"></path>
                            </svg>
                            <p>自动化任务</p>
                        </a>
                    </li>
                    
                </ul>
            </nav>


            <div class="main-content space-y-6 pt-2">

                <div class="flex items-center gap-2 rounded-lg bg-white px-4 py-3 shadow-3xl dark:bg-lightblue dark:shadow-black/10">
                    <button type="button" @click="$store.app.toggleSidebar()" class="flex h-9 w-9 flex-none items-center justify-center rounded-lg bg-slate-100 transition-all duration-300 hover:bg-slate-200 hover:text-indigo-600 dark:bg-white/5 dark:hover:bg-lightindigo dark:hover:text-white lg:hidden">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentcolor" viewbox="0 0 256 256">
                            <path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"></path>
                        </svg>
                    </button>
                    <div class="flex flex-1 items-center justify-between gap-2">
                        <div class="flex items-center gap-2">
                            <div class="hidden md:block">
                                <nav aria-label="breadcrumb" class="w-full px-2 py-1 text-sm">
                                    <ol class="flex space-x-2">
                                        <li class="flex items-center">
                                            <a href="javaScript:;" class="flex items-center text-slate-600/50 hover:text-indigo-600 dark:text-indigo-300 dark:hover:text-white">控制中心</a>
                                        </li>
                                        <li class="flex items-center space-x-1">
                                            <span class="text-slate-600/50 dark:text-indigo-300">/</span>
                                            <a href="javaScript:;" class="flex items-center px-2 text-indigo-600 dark:text-white">首页</a>
                                        </li>
                                    </ol>
                                </nav>
                            </div>
                        </div>
                        <div class="flex flex-none items-center gap-2">
                            <div class="relative">
                                <button class="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-100 transition-all duration-300 hover:bg-slate-200 hover:text-indigo-600 dark:bg-white/5 dark:hover:bg-lightindigo dark:hover:text-white" x-cloak x-show="$store.app.mode === 'light'" @click="$store.app.toggleMode('dark')">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentcolor" viewbox="0 0 256 256">
                                        <path d="M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z"></path>
                                    </svg>
                                </button>
                                <button class="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-100 transition-all duration-300 hover:bg-slate-200 hover:text-indigo-600 dark:bg-white/5 dark:hover:bg-lightindigo dark:hover:text-white" x-cloak x-show="$store.app.mode === 'dark'" @click="$store.app.toggleMode('light')">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentcolor" viewbox="0 0 256 256">
                                        <path d="M120,40V16a8,8,0,0,1,16,0V40a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-16-16A8,8,0,0,0,42.34,53.66Zm0,116.68-16,16a8,8,0,0,0,11.32,11.32l16-16a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l16-16a8,8,0,0,0-11.32-11.32l-16,16A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32-11.32ZM48,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H40A8,8,0,0,0,48,128Zm80,80a8,8,0,0,0-8,8v24a8,8,0,0,0,16,0V216A8,8,0,0,0,128,208Zm112-88H216a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z"></path>
                                    </svg>
                                </button>
                            </div>
                            <div x-data="{ fullScreen: false }">
                                <button class="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-100 transition-all duration-300 hover:bg-slate-200 hover:text-indigo-600 dark:bg-white/5 dark:hover:bg-lightindigo dark:hover:text-white" x-cloak x-bind:class="{ 'hidden': fullScreen, 'block': !fullScreen }" x-on:click="fullScreen = !fullScreen" @click="$store.app.toggleFullScreen()">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentcolor" viewbox="0 0 256 256">
                                        <path d="M216,48V88a8,8,0,0,1-16,0V56H168a8,8,0,0,1,0-16h40A8,8,0,0,1,216,48ZM88,200H56V168a8,8,0,0,0-16,0v40a8,8,0,0,0,8,8H88a8,8,0,0,0,0-16Zm120-40a8,8,0,0,0-8,8v32H168a8,8,0,0,0,0,16h40a8,8,0,0,0,8-8V168A8,8,0,0,0,208,160ZM88,40H48a8,8,0,0,0-8,8V88a8,8,0,0,0,16,0V56H88a8,8,0,0,0,0-16Z"></path>
                                    </svg>
                                </button>
                                <button class="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-100 transition-all duration-300 hover:bg-slate-200 hover:text-indigo-600 dark:bg-white/5 dark:hover:bg-lightindigo dark:hover:text-white" x-cloak x-bind:class="{ 'block': fullScreen, 'hidden': !fullScreen }" x-on:click="fullScreen = !fullScreen" @click="$store.app.toggleFullScreen()">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentcolor" viewbox="0 0 256 256">
                                        <path d="M152,96V48a8,8,0,0,1,16,0V88h40a8,8,0,0,1,0,16H160A8,8,0,0,1,152,96ZM96,152H48a8,8,0,0,0,0,16H88v40a8,8,0,0,0,16,0V160A8,8,0,0,0,96,152Zm112,0H160a8,8,0,0,0-8,8v48a8,8,0,0,0,16,0V168h40a8,8,0,0,0,0-16ZM96,40a8,8,0,0,0-8,8V88H48a8,8,0,0,0,0,16H96a8,8,0,0,0,8-8V48A8,8,0,0,0,96,40Z"></path>
                                    </svg>
                                </button>
                            </div>
                            <div class="relative" x-data="dropdown" @click.outside="open = false">
                                <button class="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-100 transition-all duration-300 hover:bg-slate-200 hover:text-indigo-600 dark:bg-white/5 dark:hover:bg-lightindigo dark:hover:text-white" @click="toggle()">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentcolor" viewbox="0 0 256 256">
                                        <path d="M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a64,64,0,1,1,128,0c0,36.05,8.28,66.73,16,80Z"></path>
                                    </svg>
                                </button>
                                <ul class="absolute right-0 top-[3.25rem] z-10 w-[22rem] min-w-[190px] rounded bg-white text-sm text-slate-400 shadow-3xl dark:bg-[#323249] dark:shadow-black/10" x-cloak x-show="open" x-transition x-transition.duration.300ms>
                                    <li class="border-b border-slate-200 dark:border-gray-100/10">
                                        <div class="flex items-center justify-between gap-2 px-5 py-4">
                                            <h5 class="text-base font-medium">消息</h5>
                                            <a href="javascript:;">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentcolor" viewbox="0 0 256 256">
                                                    <path d="M228.44,89.34l-96-64a8,8,0,0,0-8.88,0l-96,64A8,8,0,0,0,24,96V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V96A8,8,0,0,0,228.44,89.34ZM128,41.61l81.91,54.61-67,47.78H113.11l-67-47.78ZM40,200V111.53l65.9,47a8,8,0,0,0,4.65,1.49h34.9a8,8,0,0,0,4.65-1.49l65.9-47V200Z"></path>
                                                </svg>
                                            </a>
                                        </div>
                                    </li>
                                    <li class="relative max-h-96 overflow-auto">
                                        <ul class="flex flex-col divide-y divide-slate-200 dark:divide-gray-100/10">
                                            <li class="group relative p-4 transition-all duration-300 hover:bg-slate-100 dark:hover:bg-black/10" x-show="showElement" x-data="{ showElement: true }" x-transition x-transition.duration.300ms>
                                                <div class="flex">
                                                    <div class="me-4 flex-shrink-0">
                                                        <img class="h-9 w-9 rounded-full object-cover" src="assets/images/avatar-1.png" alt="image" />
                                                    </div>
                                                    <div class="flex-grow text-[15px]">
                                                        <h6 class="mb-1 font-medium text-slate-600 dark:text-indigo-300">Congratulation Lettie 🎉</h6>
                                                        <p class>Won the monthly best seller gold badge</p>
                                                        <small class="text-xs text-slate-400">1h ago</small>
                                                    </div>
                                                    <div class="flex flex-shrink-0 flex-col gap-3 text-center">
                                                        <a href="" class="text-slate-600 transition-all duration-300">
                                                            <div class="mx-auto h-2 w-2 rounded-full bg-indigo-600"></div>
                                                        </a>
                                                        <a href="" x-on:click="showElement = false" class="invisible text-slate-400 transition-all duration-300 group-hover:visible">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentcolor" viewbox="0 0 256 256">
                                                                <path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path>
                                                            </svg>
                                                        </a>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="group relative p-4 transition-all duration-300 hover:bg-slate-100 dark:hover:bg-black/10" x-show="showElement" x-data="{ showElement: true }" x-transition x-transition.duration.300ms>
                                                <div class="flex">
                                                    <div class="me-4 flex-shrink-0">
                                                        <img class="h-9 w-9 rounded-full object-cover" src="assets/images/avatar-2.png" alt="image" />
                                                    </div>
                                                    <div class="flex-grow text-[15px]">
                                                        <h6 class="mb-1 font-medium text-slate-600 dark:text-indigo-300">New Message</h6>
                                                        <p class>You have new message from Natalie</p>
                                                        <small class="text-xs text-slate-400">1h ago</small>
                                                    </div>
                                                    <div class="flex flex-shrink-0 flex-col gap-3 text-center">
                                                        <a href="" class="invisible text-slate-600 transition-all duration-300 group-hover:visible">
                                                            <div class="mx-auto h-2 w-2 rounded-full bg-slate-400"></div>
                                                        </a>
                                                        <a href="" x-on:click="showElement = false" class="invisible text-slate-400 transition-all duration-300 group-hover:visible">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentcolor" viewbox="0 0 256 256">
                                                                <path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path>
                                                            </svg>
                                                        </a>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="group relative p-4 transition-all duration-300 hover:bg-slate-100 dark:hover:bg-black/10" x-show="showElement" x-data="{ showElement: true }" x-transition x-transition.duration.300ms>
                                                <div class="flex">
                                                    <div class="me-4 flex-shrink-0">
                                                        <img class="h-9 w-9 rounded-full object-cover" src="assets/images/avatar-3.png" alt="image" />
                                                    </div>
                                                    <div class="flex-grow text-[15px]">
                                                        <h6 class="mb-1 font-medium text-slate-600 dark:text-indigo-300">Whoo! You have new order</h6>
                                                        <p class>ACME Inc. made new order $1,154</p>
                                                        <small class="text-xs text-slate-400">1 day ago</small>
                                                    </div>
                                                    <div class="flex flex-shrink-0 flex-col gap-3 text-center">
                                                        <a href="" class="invisible text-slate-600 transition-all duration-300 group-hover:visible">
                                                            <div class="mx-auto h-2 w-2 rounded-full bg-slate-400"></div>
                                                        </a>
                                                        <a href="" x-on:click="showElement = false" class="invisible text-slate-400 transition-all duration-300 group-hover:visible">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentcolor" viewbox="0 0 256 256">
                                                                <path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path>
                                                            </svg>
                                                        </a>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="group relative p-4 transition-all duration-300 hover:bg-slate-100 dark:hover:bg-black/10" x-show="showElement" x-data="{ showElement: true }" x-transition x-transition.duration.300ms>
                                                <div class="flex">
                                                    <div class="me-4 flex-shrink-0">
                                                        <img class="h-9 w-9 rounded-full object-cover" src="assets/images/avatar-5.png" alt="image" />
                                                    </div>
                                                    <div class="flex-grow text-[15px]">
                                                        <h6 class="mb-1 font-medium text-slate-600 dark:text-indigo-300">Application has been approved</h6>
                                                        <p class>Your ABC project application has been approved.</p>
                                                        <small class="text-xs text-slate-400">2 days ago</small>
                                                    </div>
                                                    <div class="flex flex-shrink-0 flex-col gap-3 text-center">
                                                        <a href="" class="text-slate-600 transition-all duration-300">
                                                            <div class="mx-auto h-2 w-2 rounded-full bg-indigo-600"></div>
                                                        </a>
                                                        <a href="" x-on:click="showElement = false" class="invisible text-slate-400 transition-all duration-300 group-hover:visible">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentcolor" viewbox="0 0 256 256">
                                                                <path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path>
                                                            </svg>
                                                        </a>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="group relative p-4 transition-all duration-300 hover:bg-slate-100 dark:hover:bg-black/10" x-show="showElement" x-data="{ showElement: true }" x-transition x-transition.duration.300ms>
                                                <div class="flex">
                                                    <div class="me-4 flex-shrink-0">
                                                        <img class="h-9 w-9 rounded-full object-cover" src="assets/images/avatar-6.png" alt="image" />
                                                    </div>
                                                    <div class="flex-grow text-[15px]">
                                                        <h6 class="mb-1 font-medium text-slate-600 dark:text-indigo-300">Send connection request</h6>
                                                        <p class>Peter sent you connection request</p>
                                                        <small class="text-xs text-slate-400">4 days ago</small>
                                                    </div>
                                                    <div class="flex flex-shrink-0 flex-col gap-3 text-center">
                                                        <a href="" class="invisible text-slate-600 transition-all duration-300 group-hover:visible">
                                                            <div class="mx-auto h-2 w-2 rounded-full bg-slate-400"></div>
                                                        </a>
                                                        <a href="" x-on:click="showElement = false" class="invisible text-slate-400 transition-all duration-300 group-hover:visible">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentcolor" viewbox="0 0 256 256">
                                                                <path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path>
                                                            </svg>
                                                        </a>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="border-t border-slate-200 dark:border-gray-100/10">
                                        <a href="javascript:;" class="flex h-10 w-full items-center justify-center p-2 text-indigo-600 transition-all duration-300 hover:bg-indigo-600 hover:text-white dark:text-indigo-300 dark:hover:text-white"> View all notifications</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="relative" x-data="dropdown" @click.outside="open = false">
                                <button type="button" class="flex items-center gap-1.5 xl:gap-0" @click="toggle()">
                                    <img class="h-9 w-9 rounded-full xl:mr-2" src="assets/images/avatar-1.png" alt="Header Avatar" />
                                    <span class="hidden xl:block">管理员</span>
                                    <svg xmlns="http://www.w3.org/2000/svg" class="ms-1 hidden md:block" width="20" height="20" fill="currentcolor" viewbox="0 0 256 256">
                                        <path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"></path>
                                    </svg>
                                </button>
                                <ul class="absolute right-0 top-11 z-10 mt-2 w-40 min-w-[190px] rounded bg-white p-2 text-sm text-slate-400 shadow-md dark:bg-[#323249]" x-cloak x-show="open" x-transition x-transition.duration.300ms>
                                    <li>
                                        <div class="flex items-center !p-1">
                                            <div class="flex-none">
                                                <img class="h-7 w-7 rounded-full object-cover" src="assets/images/avatar-1.png" alt="image" />
                                            </div>
                                            <div class="pl-2">
                                                <h4 class="text-sm font-medium leading-none">夜空</h4>
                                                <a class="text-xs hover:text-black dark:hover:text-indigo-300" href="javaScript:;"><span class="__cf_email__" data-cfemail="3c5655524f49547c59445d514c5059125f5351">434658198@qq.com</span></a>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="my-1 block h-px bg-slate-200 dark:bg-gray-100/10"></li>
                                    <li>
                                        <a href="javaScript:;" class="flex items-center px-4 py-2 transition-all duration-300 hover:bg-slate-100 hover:text-slate-600 dark:hover:bg-black/10 dark:hover:text-indigo-300">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="mr-2" width="16" height="16" fill="currentcolor" viewbox="0 0 256 256">
                                                <path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24ZM74.08,197.5a64,64,0,0,1,107.84,0,87.83,87.83,0,0,1-107.84,0ZM96,120a32,32,0,1,1,32,32A32,32,0,0,1,96,120Zm97.76,66.41a79.66,79.66,0,0,0-36.06-28.75,48,48,0,1,0-59.4,0,79.66,79.66,0,0,0-36.06,28.75,88,88,0,1,1,131.52,0Z"></path>
                                            </svg>
                                            个人信息
                                        </a>
                                    </li>
                                    <!--li>
                                        <a href="javaScript:;" class="flex items-center px-4 py-2 transition-all duration-300 hover:bg-slate-100 hover:text-slate-600 dark:hover:bg-black/10 dark:hover:text-indigo-300">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="mr-2" width="16" height="16" fill="currentcolor" viewbox="0 0 256 256">
                                                <path d="M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm109.94-52.79a8,8,0,0,0-3.89-5.4l-29.83-17-.12-33.62a8,8,0,0,0-2.83-6.08,111.91,111.91,0,0,0-36.72-20.67,8,8,0,0,0-6.46.59L128,41.85,97.88,25a8,8,0,0,0-6.47-.6A112.1,112.1,0,0,0,54.73,45.15a8,8,0,0,0-2.83,6.07l-.15,33.65-29.83,17a8,8,0,0,0-3.89,5.4,106.47,106.47,0,0,0,0,41.56,8,8,0,0,0,3.89,5.4l29.83,17,.12,33.62a8,8,0,0,0,2.83,6.08,111.91,111.91,0,0,0,36.72,20.67,8,8,0,0,0,6.46-.59L128,214.15,158.12,231a7.91,7.91,0,0,0,3.9,1,8.09,8.09,0,0,0,2.57-.42,112.1,112.1,0,0,0,36.68-20.73,8,8,0,0,0,2.83-6.07l.15-33.65,29.83-17a8,8,0,0,0,3.89-5.4A106.47,106.47,0,0,0,237.94,107.21Zm-15,34.91-28.57,16.25a8,8,0,0,0-3,3c-.58,1-1.19,2.06-1.81,3.06a7.94,7.94,0,0,0-1.22,4.21l-.15,32.25a95.89,95.89,0,0,1-25.37,14.3L134,199.13a8,8,0,0,0-3.91-1h-.19c-1.21,0-2.43,0-3.64,0a8.08,8.08,0,0,0-4.1,1l-28.84,16.1A96,96,0,0,1,67.88,201l-.11-32.2a8,8,0,0,0-1.22-4.22c-.62-1-1.23-2-1.8-3.06a8.09,8.09,0,0,0-3-3.06l-28.6-16.29a90.49,90.49,0,0,1,0-28.26L61.67,97.63a8,8,0,0,0,3-3c.58-1,1.19-2.06,1.81-3.06a7.94,7.94,0,0,0,1.22-4.21l.15-32.25a95.89,95.89,0,0,1,25.37-14.3L122,56.87a8,8,0,0,0,4.1,1c1.21,0,2.43,0,3.64,0a8.08,8.08,0,0,0,4.1-1l28.84-16.1A96,96,0,0,1,188.12,55l.11,32.2a8,8,0,0,0,1.22,4.22c.62,1,1.23,2,1.8,3.06a8.09,8.09,0,0,0,3,3.06l28.6,16.29A90.49,90.49,0,0,1,222.9,142.12Z"></path>
                                            </svg>
                                            Settings
                                        </a>
                                    </li-->
                                    <li class="my-1 block h-px bg-slate-200 dark:bg-gray-100/10"></li>
                                    <li>
                                        <a href="javaScript:;" class="flex items-center px-4 py-2 text-red-600 transition-all duration-300 hover:bg-slate-100 dark:hover:bg-black/10">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="mr-2" width="16" height="16" fill="currentcolor" viewbox="0 0 256 256">
                                                <path d="M112,216a8,8,0,0,1-8,8H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32h56a8,8,0,0,1,0,16H48V208h56A8,8,0,0,1,112,216Zm109.66-93.66-40-40a8,8,0,0,0-11.32,11.32L196.69,120H104a8,8,0,0,0,0,16h92.69l-26.35,26.34a8,8,0,0,0,11.32,11.32l40-40A8,8,0,0,0,221.66,122.34Z"></path>
                                            </svg>
                                            退出登录
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="min-h-[calc(100vh-152px)] space-y-6 text-[15px]">
                    <!--h2 class="mb-6 text-lg font-medium text-slate-600 dark:text-white">数据报表</h2-->
                    <div class="grid grid-cols-1 xl:grid-cols-3 gap-6 text-[15px] mb-6">
                        <div class="rounded-lg bg-white shadow-3xl dark:bg-lightblue dark:shadow-black/10">
                            <!--div class="flex flex-wrap items-center justify-between gap-3">
                                <div class="p-6">
                                    <h6 class="font-medium">Congratulations Jinsu!</h6>
                                    <p class="text-[13px] mb-4 text-gray-400">Best seller of the month</p>
                                    <h5 class="text-2xl/5 font-semibold text-indigo-600 dark:text-white mb-1">$89.9k</h5>
                                    <p class="text-[13px] mb-4 text-gray-400">65% of target</p>
                                    <a href="javascript:;" class="btn bg-indigo-600 border-indigo-600 text-white text-xs">View sales</a>
                                </div>
                                <img src="assets/images/prize-light.png" width="100" class="sm:mx-6 mx-auto mt-px">
                            </div-->
                        </div>
                        <div class="rounded-lg xl:col-span-2 bg-white py-6 shadow-3xl dark:bg-lightblue dark:shadow-black/10">
                            <div class="grid grid-cols-1 sm:grid-cols-2 divide-y sm:divide-y-0 sm:divide-x divide-gray-300 dark:divide-white/10">
                                <div class="px-6 pb-6 sm:pb-0 space-y-3.5">
                                    <div class="flex items-center justify-between gap-3">
                                        <h5 class="text-lg font-medium">新建实例</h5>
                                        <p class="text-[13px] text-gray-400">本周</p>
                                    </div>
                                    <div class="flex flex-wrap md:flex-nowrap items-end justify-between gap-3">
                                        
                                        <div>
                                            <h2 class="text-3xl font-medium">25%</h2>
                                            <p class="text-[13px] text-red-600 flex gap-2 items-center">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewbox="0 0 256 256">
                                                    <path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm37.66-85.66a8,8,0,0,1,0,11.32l-32,32a8,8,0,0,1-11.32,0l-32-32a8,8,0,0,1,11.32-11.32L120,148.69V88a8,8,0,0,1,16,0v60.69l18.34-18.35A8,8,0,0,1,165.66,130.34Z"></path>
                                                </svg>-10.50%
                                            </p>
                                        </div>
                                        <div id="visitorschart"></div>
                                    </div>
                                </div>
                                <div class="px-6 pt-6 sm:pt-0 space-y-3.5">
                                    <div class="flex items-center justify-between gap-3">
                                        <h5 class="text-lg font-medium">开机状态</h5>
                                        <p class="text-[13px] text-gray-400">本周</p>
                                    </div>
                                    <div class="flex flex-wrap md:flex-nowrap items-end justify-between gap-3">
                                        <div>
                                            <h2 class="text-3xl font-medium">78%</h2>
                                            <p class="text-[13px] text-green-600 flex gap-2 items-center">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="rotate-180" width="16" height="16" fill="currentColor" viewbox="0 0 256 256">
                                                    <path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm37.66-85.66a8,8,0,0,1,0,11.32l-32,32a8,8,0,0,1-11.32,0l-32-32a8,8,0,0,1,11.32-11.32L120,148.69V88a8,8,0,0,1,16,0v60.69l18.34-18.35A8,8,0,0,1,165.66,130.34Z"></path>
                                                </svg>-28.78%
                                            </p>
                                        </div>
                                        <div id="activitychart"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 xl:grid-cols-2 gap-6">
                            <div class="rounded-lg bg-white p-6 shadow-3xl dark:bg-lightblue dark:shadow-black/10">
                                <div class="flex flex-wrap items-start justify-between gap-3 mb-3.5">
                                    <img src="assets/images/icon-6.png" class="w-10 h-10 flex-none rounded-md object-cover" alt="avatar">
                                    <div class="relative" x-data="dropdown" @click.outside="open = false">
                                        <button class="flex items-center justify-center" @click="toggle()">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentcolor" viewbox="0 0 256 256">
                                                <path d="M112,60a16,16,0,1,1,16,16A16,16,0,0,1,112,60Zm16,52a16,16,0,1,0,16,16A16,16,0,0,0,128,112Zm0,68a16,16,0,1,0,16,16A16,16,0,0,0,128,180Z"></path>
                                            </svg>
                                        </button>
                                        <ul x-show="open" x-transition class="absolute text-[15px] right-0 z-10 mt-1 w-full min-w-[190px] whitespace-nowrap rounded bg-white py-2 text-slate-400 shadow-md dark:bg-[#323249]" style="display: none;">
                                            <li><a href="javascript:;" class="flex items-center px-4 py-2 transition-all duration-300 hover:bg-slate-100 hover:text-slate-600 dark:hover:bg-black/10 dark:hover:text-indigo-300">View More</a></li>
                                            <li><a href="javascript:;" class="flex items-center px-4 py-2 transition-all duration-300 hover:bg-slate-100 hover:text-slate-600 dark:hover:bg-black/10 dark:hover:text-indigo-300">Delete</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <p class="text-[15px] font-semibold mb-1">Sales</p>
                                <h4 class="text-[22px] font-medium mb-2">$8,857</h4>
                                <p class="flex items-center gap-1 text-xs font-semibold text-green-600">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentcolor" viewbox="0 0 256 256">
                                        <path d="M208.49,120.49a12,12,0,0,1-17,0L140,69V216a12,12,0,0,1-24,0V69L64.49,120.49a12,12,0,0,1-17-17l72-72a12,12,0,0,1,17,0l72,72A12,12,0,0,1,208.49,120.49Z"></path>
                                    </svg>
                                    +30.14%
                                </p>
                            </div>
                            <div class="rounded-lg bg-white p-6 pb-2 shadow-3xl dark:bg-lightblue dark:shadow-black/10">
                                <p class="font-semibold mb-1">Profit</p>
                                <h4 class="text-2xl font-medium">785K</h4>
                                <div id="profitchart"></div>
                            </div>
                            <div class="rounded-lg bg-white p-6 shadow-3xl dark:bg-lightblue dark:shadow-black/10">
                                <p class="font-semibold">Expenses</p>
                                <div id="expenseschart"></div>
                                <p class="text-[13px] leading-4 text-gray-400 mt-4 text-center">$21k Expenses more than last month</p>
                            </div>
                            <div class="rounded-lg bg-white p-6 shadow-3xl dark:bg-lightblue dark:shadow-black/10">
                                <div class="flex flex-wrap items-start justify-between gap-3 mb-3.5">
                                    <img src="assets/images/icon-5.png" class="w-10 h-10 flex-none rounded-md object-cover" alt="avatar">
                                    <div class="relative" x-data="dropdown" @click.outside="open = false">
                                        <button class="flex items-center justify-center" @click="toggle()">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentcolor" viewbox="0 0 256 256">
                                                <path d="M112,60a16,16,0,1,1,16,16A16,16,0,0,1,112,60Zm16,52a16,16,0,1,0,16,16A16,16,0,0,0,128,112Zm0,68a16,16,0,1,0,16,16A16,16,0,0,0,128,180Z"></path>
                                            </svg>
                                        </button>
                                        <ul x-show="open" x-transition class="absolute text-[15px] right-0 z-10 mt-1 w-full min-w-[190px] whitespace-nowrap rounded bg-white py-2 text-slate-400 shadow-md dark:bg-[#323249]" style="display: none;">
                                            <li><a href="javascript:;" class="flex items-center px-4 py-2 transition-all duration-300 hover:bg-slate-100 hover:text-slate-600 dark:hover:bg-black/10 dark:hover:text-indigo-300">View More</a></li>
                                            <li><a href="javascript:;" class="flex items-center px-4 py-2 transition-all duration-300 hover:bg-slate-100 hover:text-slate-600 dark:hover:bg-black/10 dark:hover:text-indigo-300">Delete</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <p class="text-[15px] font-semibold mb-1">Transactions</p>
                                <h4 class="text-[22px] font-medium mb-2">$18,757</h4>
                                <p class="flex items-center gap-1 text-xs font-semibold text-green-600">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentcolor" viewbox="0 0 256 256">
                                        <path d="M208.49,120.49a12,12,0,0,1-17,0L140,69V216a12,12,0,0,1-24,0V69L64.49,120.49a12,12,0,0,1-17-17l72-72a12,12,0,0,1,17,0l72,72A12,12,0,0,1,208.49,120.49Z"></path>
                                    </svg>
                                    +48.14%
                                </p>
                            </div>
                        </div>
                        <div class="rounded-lg xl:col-span-2 bg-white p-6 shadow-3xl dark:bg-lightblue dark:shadow-black/10">
                            <h5 class="text-lg/5 font-medium">Total Income</h5>
                            <p class="text-[13px] text-gray-400 mb-6">Yearly report overview</p>
                            <!-- <div id="totalIncomeChart"></div> -->
                            <div id="lineAreaChart"></div>
                        </div>
                        <div class="rounded-lg xl:col-span-2 bg-white p-6 shadow-3xl dark:bg-lightblue dark:shadow-black/10">
                            <h5 class="text-lg/5 font-medium mb-6">Total Income</h5>
                            <div class="table-responsive">
                                <table class="min-w-[750px]">
                                    <thead>
                                        <tr>
                                            <th class="rounded-l-md whitespace-nowrap">PRODUCT</th>
                                            <th class="whitespace-nowrap">CATEGORY</th>
                                            <th class="whitespace-nowrap">PAYMENT</th>
                                            <th class="whitespace-nowrap">ORDER STATUS</th>
                                            <th class="rounded-r-md whitespace-nowrap">ACTIONS</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="whitespace-nowrap">
                                                <div class="flex w-full items-center gap-2">
                                                    <img src="assets/images/oneplus.png" class="w-8 h-8">
                                                    <div>
                                                        <p class="font-semibold whitespace-nowrap">OnePlus 7Pro</p>
                                                        <p class="text-[13px] text-gray-400 whitespace-nowrap">OnePlus</p>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="font-semibold">
                                                <div class="flex items-center gap-2">
                                                    <div class="w-8 h-8 rounded-md flex-none bg-green-100 text-green-600 flex items-center justify-center">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewbox="0 0 256 256">
                                                            <path d="M176,16H80A24,24,0,0,0,56,40V216a24,24,0,0,0,24,24h96a24,24,0,0,0,24-24V40A24,24,0,0,0,176,16ZM72,64H184V192H72Zm8-32h96a8,8,0,0,1,8,8v8H72V40A8,8,0,0,1,80,32Zm96,192H80a8,8,0,0,1-8-8v-8H184v8A8,8,0,0,1,176,224Z"></path>
                                                        </svg>
                                                    </div>
                                                    <h6 class="text-[15px] font-medium">Smart Phone</h6>
                                                </div>
                                            </td>
                                            <td class="whitespace-nowrap">$120</td>
                                            <td class="whitespace-nowrap">
                                                <span class="relative my-1 py-0.5 px-2 text-xs font-semibold rounded-full bg-indigo-100 text-indigo-600">CONFIRMED</span>
                                            </td>
                                            <td>
                                                <div class="relative text-center" x-data="dropdown" @click.outside="open = false">
                                                    <button class="inline-block items-center justify-center" @click="toggle()">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentcolor" viewbox="0 0 256 256">
                                                            <path d="M112,60a16,16,0,1,1,16,16A16,16,0,0,1,112,60Zm16,52a16,16,0,1,0,16,16A16,16,0,0,0,128,112Zm0,68a16,16,0,1,0,16,16A16,16,0,0,0,128,180Z"></path>
                                                        </svg>
                                                    </button>
                                                    <ul x-show="open" x-transition class="absolute text-[15px] right-0 z-10 mt-1 w-full min-w-[190px] whitespace-nowrap rounded bg-white py-2 text-slate-400 shadow-md dark:bg-[#323249]" style="display: none;">
                                                        <li><a href="javascript:;" class="flex items-center px-4 py-2 transition-all duration-300 hover:bg-slate-100 hover:text-slate-600 dark:hover:bg-black/10 dark:hover:text-indigo-300">View Details</a></li>
                                                        <li><a href="javascript:;" class="flex items-center px-4 py-2 transition-all duration-300 hover:bg-slate-100 hover:text-slate-600 dark:hover:bg-black/10 dark:hover:text-indigo-300">Buy Again</a></li>
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div class="flex items-center gap-2">
                                                    <img src="assets/images/magic-mouse.png" class="w-8 h-8">
                                                    <div>
                                                        <p class="font-semibold">Magic Mouse</p>
                                                        <p class="text-[13px] text-gray-400">Apple</p>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="font-semibold">
                                                <div class="flex items-center gap-2">
                                                    <div class="w-8 h-8 rounded-md flex-none bg-yellow-100 text-yellow-600 flex items-center justify-center">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewbox="0 0 256 256">
                                                            <path d="M144,16H112A64.07,64.07,0,0,0,48,80v96a64.07,64.07,0,0,0,64,64h32a64.07,64.07,0,0,0,64-64V80A64.07,64.07,0,0,0,144,16Zm48,160a48.05,48.05,0,0,1-48,48H112a48.05,48.05,0,0,1-48-48V80a48.05,48.05,0,0,1,48-48h32a48.05,48.05,0,0,1,48,48ZM136,64v48a8,8,0,0,1-16,0V64a8,8,0,0,1,16,0Z"></path>
                                                        </svg>
                                                    </div>
                                                    <h6 class="text-[15px] font-medium">Mouse</h6>
                                                </div>
                                            </td>
                                            <td class="whitespace-nowrap">$149</td>
                                            <td class="whitespace-nowrap">
                                                <span class="relative my-1 py-0.5 px-2 text-xs font-semibold rounded-full bg-green-100 text-green-600">COMPLETED</span>
                                            </td>
                                            <td>
                                                <div class="relative text-center" x-data="dropdown" @click.outside="open = false">
                                                    <button class="inline-block items-center justify-center" @click="toggle()">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentcolor" viewbox="0 0 256 256">
                                                            <path d="M112,60a16,16,0,1,1,16,16A16,16,0,0,1,112,60Zm16,52a16,16,0,1,0,16,16A16,16,0,0,0,128,112Zm0,68a16,16,0,1,0,16,16A16,16,0,0,0,128,180Z"></path>
                                                        </svg>
                                                    </button>
                                                    <ul x-show="open" x-transition class="absolute text-[15px] right-0 z-10 mt-1 w-full min-w-[190px] whitespace-nowrap rounded bg-white py-2 text-slate-400 shadow-md dark:bg-[#323249]" style="display: none;">
                                                        <li><a href="javascript:;" class="flex items-center px-4 py-2 transition-all duration-300 hover:bg-slate-100 hover:text-slate-600 dark:hover:bg-black/10 dark:hover:text-indigo-300">View Details</a></li>
                                                        <li><a href="javascript:;" class="flex items-center px-4 py-2 transition-all duration-300 hover:bg-slate-100 hover:text-slate-600 dark:hover:bg-black/10 dark:hover:text-indigo-300">Buy Again</a></li>
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div class="flex items-center gap-2">
                                                    <img src="assets/images/imac-pro.png" class="w-8 h-8">
                                                    <div>
                                                        <p class="font-semibold">iMac Pro</p>
                                                        <p class="text-[13px] text-gray-400">Apple</p>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="font-semibold">
                                                <div class="flex items-center gap-2">
                                                    <div class="w-8 h-8 rounded-md flex-none bg-blue-100 text-blue-600 flex items-center justify-center">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewbox="0 0 256 256">
                                                            <path d="M208,40H48A24,24,0,0,0,24,64V176a24,24,0,0,0,24,24h72v16H96a8,8,0,0,0,0,16h64a8,8,0,0,0,0-16H136V200h72a24,24,0,0,0,24-24V64A24,24,0,0,0,208,40ZM48,56H208a8,8,0,0,1,8,8v80H40V64A8,8,0,0,1,48,56ZM208,184H48a8,8,0,0,1-8-8V160H216v16A8,8,0,0,1,208,184Z"></path>
                                                        </svg>
                                                    </div>
                                                    <h6 class="text-[15px] font-medium"> Computer</h6>
                                                </div>
                                            </td>
                                            <td class="whitespace-nowrap">$0</td>
                                            <td class="whitespace-nowrap">
                                                <span class="relative my-1 py-0.5 px-2 text-xs font-semibold rounded-full bg-red-100 text-red-600">CANCELLED</span>
                                            </td>
                                            <td>
                                                <div class="relative text-center" x-data="dropdown" @click.outside="open = false">
                                                    <button class="inline-block items-center justify-center" @click="toggle()">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentcolor" viewbox="0 0 256 256">
                                                            <path d="M112,60a16,16,0,1,1,16,16A16,16,0,0,1,112,60Zm16,52a16,16,0,1,0,16,16A16,16,0,0,0,128,112Zm0,68a16,16,0,1,0,16,16A16,16,0,0,0,128,180Z"></path>
                                                        </svg>
                                                    </button>
                                                    <ul x-show="open" x-transition class="absolute text-[15px] right-0 z-10 mt-1 w-full min-w-[190px] whitespace-nowrap rounded bg-white py-2 text-slate-400 shadow-md dark:bg-[#323249]" style="display: none;">
                                                        <li><a href="javascript:;" class="flex items-center px-4 py-2 transition-all duration-300 hover:bg-slate-100 hover:text-slate-600 dark:hover:bg-black/10 dark:hover:text-indigo-300">View Details</a></li>
                                                        <li><a href="javascript:;" class="flex items-center px-4 py-2 transition-all duration-300 hover:bg-slate-100 hover:text-slate-600 dark:hover:bg-black/10 dark:hover:text-indigo-300">Buy Again</a></li>
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div class="flex items-center gap-2">
                                                    <img src="assets/images/note10.png" class="w-8 h-8">
                                                    <div>
                                                        <p class="font-semibold">Note 10</p>
                                                        <p class="text-[13px] text-gray-400">Samsung</p>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="font-semibold">
                                                <div class="flex items-center gap-2">
                                                    <div class="w-8 h-8 rounded-md flex-none bg-green-100 text-green-600 flex items-center justify-center">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewbox="0 0 256 256">
                                                            <path d="M176,16H80A24,24,0,0,0,56,40V216a24,24,0,0,0,24,24h96a24,24,0,0,0,24-24V40A24,24,0,0,0,176,16ZM72,64H184V192H72Zm8-32h96a8,8,0,0,1,8,8v8H72V40A8,8,0,0,1,80,32Zm96,192H80a8,8,0,0,1-8-8v-8H184v8A8,8,0,0,1,176,224Z"></path>
                                                        </svg>
                                                    </div>
                                                    <h6 class="text-[15px] font-medium">Smart Phone</h6>
                                                </div>
                                            </td>
                                            <td class="whitespace-nowrap">$149</td>
                                            <td class="whitespace-nowrap">
                                                <span class="relative my-1 py-0.5 px-2 text-xs font-semibold rounded-full bg-green-100 text-green-600">COMPLETED</span>
                                            </td>
                                            <td>
                                                <div class="relative text-center" x-data="dropdown" @click.outside="open = false">
                                                    <button class="inline-block items-center justify-center" @click="toggle()">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentcolor" viewbox="0 0 256 256">
                                                            <path d="M112,60a16,16,0,1,1,16,16A16,16,0,0,1,112,60Zm16,52a16,16,0,1,0,16,16A16,16,0,0,0,128,112Zm0,68a16,16,0,1,0,16,16A16,16,0,0,0,128,180Z"></path>
                                                        </svg>
                                                    </button>
                                                    <ul x-show="open" x-transition class="absolute text-[15px] right-0 z-10 mt-1 w-full min-w-[190px] whitespace-nowrap rounded bg-white py-2 text-slate-400 shadow-md dark:bg-[#323249]" style="display: none;">
                                                        <li><a href="javascript:;" class="flex items-center px-4 py-2 transition-all duration-300 hover:bg-slate-100 hover:text-slate-600 dark:hover:bg-black/10 dark:hover:text-indigo-300">View Details</a></li>
                                                        <li><a href="javascript:;" class="flex items-center px-4 py-2 transition-all duration-300 hover:bg-slate-100 hover:text-slate-600 dark:hover:bg-black/10 dark:hover:text-indigo-300">Buy Again</a></li>
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div class="flex items-center gap-2">
                                                    <img src="assets/images/iphone.png" class="w-8 h-8">
                                                    <div>
                                                        <p class="font-semibold">iPhone 11 Pro</p>
                                                        <p class="text-[13px] text-gray-400">Apple</p>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="font-semibold">
                                                <div class="flex items-center gap-2">
                                                    <div class="w-8 h-8 rounded-md flex-none bg-green-100 text-green-600 flex items-center justify-center">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewbox="0 0 256 256">
                                                            <path d="M176,16H80A24,24,0,0,0,56,40V216a24,24,0,0,0,24,24h96a24,24,0,0,0,24-24V40A24,24,0,0,0,176,16ZM72,64H184V192H72Zm8-32h96a8,8,0,0,1,8,8v8H72V40A8,8,0,0,1,80,32Zm96,192H80a8,8,0,0,1-8-8v-8H184v8A8,8,0,0,1,176,224Z"></path>
                                                        </svg>
                                                    </div>
                                                    <h6 class="text-[15px] font-medium">Smart Phone</h6>
                                                </div>
                                            </td>
                                            <td class="whitespace-nowrap">$399</td>
                                            <td class="whitespace-nowrap">
                                                <span class="relative my-1 py-0.5 px-2 text-xs font-semibold rounded-full bg-green-100 text-green-600">COMPLETED</span>
                                            </td>
                                            <td>
                                                <div class="relative text-center" x-data="dropdown" @click.outside="open = false">
                                                    <button class="inline-block items-center justify-center" @click="toggle()">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentcolor" viewbox="0 0 256 256">
                                                            <path d="M112,60a16,16,0,1,1,16,16A16,16,0,0,1,112,60Zm16,52a16,16,0,1,0,16,16A16,16,0,0,0,128,112Zm0,68a16,16,0,1,0,16,16A16,16,0,0,0,128,180Z"></path>
                                                        </svg>
                                                    </button>
                                                    <ul x-show="open" x-transition class="absolute text-[15px] right-0 z-10 mt-1 w-full min-w-[190px] whitespace-nowrap rounded bg-white py-2 text-slate-400 shadow-md dark:bg-[#323249]" style="display: none;">
                                                        <li><a href="javascript:;" class="flex items-center px-4 py-2 transition-all duration-300 hover:bg-slate-100 hover:text-slate-600 dark:hover:bg-black/10 dark:hover:text-indigo-300">View Details</a></li>
                                                        <li><a href="javascript:;" class="flex items-center px-4 py-2 transition-all duration-300 hover:bg-slate-100 hover:text-slate-600 dark:hover:bg-black/10 dark:hover:text-indigo-300">Buy Again</a></li>
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="rounded-lg bg-white p-6 shadow-3xl dark:bg-lightblue dark:shadow-black/10">
                            <div class="flex gap-2 items-center justify-between mb-6">
                                <h5 class="text-lg font-medium text-slate-600 dark:text-indigo-300">Total Balance</h5>
                                <div class="relative" x-data="dropdown" @click.outside="open = false">
                                    <button class="flex items-center justify-center" @click="toggle()">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentcolor" viewbox="0 0 256 256">
                                            <path d="M112,60a16,16,0,1,1,16,16A16,16,0,0,1,112,60Zm16,52a16,16,0,1,0,16,16A16,16,0,0,0,128,112Zm0,68a16,16,0,1,0,16,16A16,16,0,0,0,128,180Z"></path>
                                        </svg>
                                    </button>
                                    <ul x-cloak x-show="open" x-transition class="absolute text-[15px] right-0 z-10 mt-1 w-full min-w-[190px] whitespace-nowrap rounded bg-white py-2 text-slate-400 shadow-md dark:bg-[#323249]">
                                        <li><a href="javascript:;" class="flex items-center px-4 py-2 transition-all duration-300 hover:bg-slate-100 hover:text-slate-600 dark:hover:bg-black/10 dark:hover:text-indigo-300">Last 28 Day</a></li>
                                        <li><a href="javascript:;" class="flex items-center px-4 py-2 transition-all duration-300 hover:bg-slate-100 hover:text-slate-600 dark:hover:bg-black/10 dark:hover:text-indigo-300">Last Month</a></li>
                                        <li><a href="javascript:;" class="flex items-center px-4 py-2 transition-all duration-300 hover:bg-slate-100 hover:text-slate-600 dark:hover:bg-black/10 dark:hover:text-indigo-300">Last Year</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="flex flex-wrap items-center gap-6 mb-6">
                                <div class="flex gap-2">
                                    <div class="h-9 w-9 rounded-md bg-yellow-600/20 text-yellow-600 flex items-center justify-center">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentcolor" viewbox="0 0 256 256">
                                            <path d="M216,72H56a8,8,0,0,1,0-16H192a8,8,0,0,0,0-16H56A24,24,0,0,0,32,64V192a24,24,0,0,0,24,24H216a16,16,0,0,0,16-16V88A16,16,0,0,0,216,72Zm0,128H56a8,8,0,0,1-8-8V86.63A23.84,23.84,0,0,0,56,88H216Zm-48-60a12,12,0,1,1,12,12A12,12,0,0,1,168,140Z"></path>
                                        </svg>
                                    </div>
                                    <div>
                                        <h6 class="text-[15px] font-medium leading-4 mb-1">$3.34k</h6>
                                        <p class="text-xs text-gray-400">Wallet</p>
                                    </div>
                                </div>
                                <div class="flex gap-2">
                                    <div class="h-9 w-9 rounded-md bg-gray-100 text-slate-600 flex items-center justify-center">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentcolor" viewbox="0 0 256 256">
                                            <path d="M152,120H136V56h8a32,32,0,0,1,32,32,8,8,0,0,0,16,0,48.05,48.05,0,0,0-48-48h-8V24a8,8,0,0,0-16,0V40h-8a48,48,0,0,0,0,96h8v64H104a32,32,0,0,1-32-32,8,8,0,0,0-16,0,48.05,48.05,0,0,0,48,48h16v16a8,8,0,0,0,16,0V216h16a48,48,0,0,0,0-96Zm-40,0a32,32,0,0,1,0-64h8v64Zm40,80H136V136h16a32,32,0,0,1,0,64Z"></path>
                                        </svg>
                                    </div>
                                    <div>
                                        <h6 class="text-[15px] font-medium leading-4 mb-1">$6.3k</h6>
                                        <p class="text-xs text-gray-400">Paypal</p>
                                    </div>
                                </div>
                            </div>
                            <div id="totalBalanceChart" class="border-b border-gray-400 mb-4"></div>
                            <p class="text-sm text-gray-400 max-w-[250px]">You have done 57.6% more sales. Check your new badge in your profile.</p>
                        </div>
                    </div>
                </div>


                <footer class="flex flex-wrap items-center justify-center gap-3 px-4 pb-4 sm:justify-between">
                    <p class="text-sm text-slate-400">&copy; 2023 made with By <a href="http://www.bootstrapmb.com">Reserved</a></p>
                    <ul class="flex items-center text-sm text-slate-400">
                        <li><a href="" class="px-2 py-1 transition-all duration-300 hover:text-black">About</a></li>
                        <li><a href="" class="px-2 py-1 transition-all duration-300 hover:text-black">Support</a></li>
                        <li><a href="" class="px-2 py-1 transition-all duration-300 hover:text-black">Contact Us</a></li>
                    </ul>
                </footer>

            </div>

        </div>
    </div>



    <script src="assets/js/alpine-collaspe.min.js"></script>
    <script src="assets/js/alpine-persist.min.js"></script>
    <script src="assets/js/alpine.min.js" defer></script>

    <script src="assets/js/perfect-scrollbar.min.js"></script>

    <script src="assets/js/apexcharts.js"></script>
    <script src="assets/js/ecommercecharts.js"></script>

    <script src="assets/js/custom.js"></script>
    <script>
        var options = {
            series: [
                { name: "CPU", data: [70, 76, 79, 80, 40, 90, 81, 85, 80, 86, 81, 76, 60] },
                { name: "内存", data: [60, 60, 61, 62, 62, 63, 63, 64, 64, 64, 65, 65, 65] },
                { name: "硬盘", data: [52, 52, 52, 52, 53, 53, 53, 53, 53, 53, 53, 53, 53] },
            ],
            chart: { height: 400, type: "area", parentHeightOffset: 0, toolbar: { show: !1 } },
            dataLabels: { enabled: !1 },
            stroke: { show: !1, curve: "straight" },
            legend: { show: !0, position: "top", horizontalAlign: "start", labels: { useSeriesColors: !1 } },
            colors: ['#29dac7', '#60f2ca', '#a5f8cd'],
            xaxis: { categories: ["7/04", "8/04", "9/04", "10/04", "11/04", "12/04", "13/04", "14/04", "15/04", "16/04", "17/04", "18/04", "19/04", "20/04"], axisBorder: { show: !1 }, axisTicks: { show: !1 }, labels: { style: { fontSize: "13px" } } },
            yaxis: { labels: { style: { fontSize: "13px" } } },
            fill: { opacity: 1, type: "solid" },
            tooltip: { shared: !1 },
        };
        var chart = new ApexCharts(document.querySelector("#lineAreaChart"), options);
        chart.render();

        var options = {
            chart: { height: 400, type: "bar", stacked: !0, parentHeightOffset: 0, toolbar: { show: !1 } },
            plotOptions: { bar: { columnWidth: "15%", colors: { backgroundBarColors: ['#f8d3ff', '#f8d3ff', '#f8d3ff', '#f8d3ff', '#f8d3ff'], backgroundBarRadius: 10 } } },
            dataLabels: { enabled: !1 },
            legend: { show: !0, position: "top", horizontalAlign: "start", labels: { useSeriesColors: !1 } },
            colors: ['#826af9', '#d2b0ff'],
            stroke: { show: !0, colors: ["transparent"] },
            series: [
                { name: "Mi", data: [90, 120, 55, 100, 80, 125, 175, 70, 88, 180] },
                { name: "onePlus", data: [85, 100, 30, 40, 95, 90, 30, 110, 62, 20] },
            ],
            xaxis: { categories: ["7/04", "8/04", "9/04", "10/04", "11/04", "12/04", "13/04", "14/04", "15/04", "16/04"], axisBorder: { show: !1 }, axisTicks: { show: !1 }, labels: { style: { fontSize: "13px" } } },
            yaxis: { labels: { style: { fontSize: "13px" } } },
            fill: { opacity: 1 },
        };
        var chart = new ApexCharts(document.querySelector("#barChart"), options);
        chart.render();

        var options = {
            chart: { height: 400, type: "scatter", zoom: { enabled: !0, type: "xy" }, parentHeightOffset: 0, toolbar: { show: !1 } },
            legend: { show: !0, position: "top", horizontalAlign: "start", labels: { useSeriesColors: !1 } },
            colors: ['#ca8a04', '#4f46e5', '#16a34a'],
            series: [
                { name: "Angular", data: [[5.4, 170], [5.4, 100], [5.7, 110], [5.9, 150], [6, 200], [6.3, 170], [5.7, 140], [5.9, 130], [7, 150], [8, 120], [9, 170], [10, 190], [11, 220], [12, 170], [13, 230],], },
                { name: "HTML", data: [[14, 220], [15, 280], [16, 230], [18, 320], [17.5, 280], [19, 250], [20, 350], [20.5, 320], [20, 320], [19, 280], [17, 280], [22, 300], [18, 120],], },
                { name: "React", data: [[14, 290], [13, 190], [20, 220], [21, 350], [21.5, 290], [22, 220], [23, 140], [19, 400], [20, 200], [22, 90], [20, 120],], },
            ],
            xaxis: {
                tickAmount: 10,
                axisBorder: { show: !1 },
                axisTicks: { show: !1 },
                labels: {
                    formatter: function (e) {
                        return parseFloat(e).toFixed(1);
                    },
                    style: { fontSize: "13px" },
                },
            },
            yaxis: { labels: { style: { fontSize: "13px" } } },
        };
        var chart = new ApexCharts(document.querySelector("#scatterChart"), options);
        chart.render();

        var options = {
            chart: { height: 400, type: "line", parentHeightOffset: 0, zoom: { enabled: !1 }, toolbar: { show: !1 } },
            series: [{ data: [280, 200, 220, 180, 270, 250, 70, 90, 200, 150, 160, 100, 150, 100, 50] }],
            markers: { strokeWidth: 7, strokeOpacity: 1, colors: ['#ffab00'] },
            dataLabels: { enabled: !1 },
            stroke: { curve: "straight" },
            colors: ['#ffab00'],
            grid: { xaxis: { lines: { show: !0 } }, padding: { top: -20 } },
            tooltip: {
                custom: function ({ series: e, seriesIndex: o, dataPointIndex: r, w: s }) {
                    return '<div class="px-3 py-2"><span>' + e[o][r] + "%</span></div>";
                },
            },
            xaxis: { categories: ["7/04", "8/04", "9/04", "10/04", "11/04", "12/04", "13/04", "14/04", "15/04", "16/04", "17/04", "18/04", "19/04", "20/04", "21/04"], axisBorder: { show: !1 }, axisTicks: { show: !1 }, labels: { style: { fontSize: "13px" } } },
            yaxis: { labels: { style: { fontSize: "13px" } } },
        };
        var chart = new ApexCharts(document.querySelector("#lineChart"), options);
        chart.render();

        var options = {
            chart: { height: 400, type: "bar", toolbar: { show: !1 } }, plotOptions: { bar: { horizontal: !0, barHeight: "30%", startingShape: "rounded", borderRadius: 8 } }, grid: { xaxis: { lines: { show: !1 } }, padding: { top: -20, bottom: -12 } }, colors: '#2563eb', dataLabels: { enabled: !1 }, series: [{ data: [700, 350, 480, 600, 210, 550, 150] }], xaxis: { categories: ["MON, 10", "THU, 13", "FRI, 14", "MON, 17", "WED, 19", "FRI, 21", "MON, 24"], axisBorder: { show: !1 }, axisTicks: { show: !1 }, labels: { style: { fontSize: "13px" } } }, yaxis: { labels: { style: { fontSize: "13px" } } }
        };
        var chart = new ApexCharts(document.querySelector("#horizontalBarChart"), options);
        chart.render();

        var options = {
            chart: { height: 410, type: "candlestick", parentHeightOffset: 0, toolbar: { show: !1 } },
            series: [
                {
                    data: [
                        { x: new Date(15387786e5), y: [150, 170, 50, 100] },
                        { x: new Date(15387804e5), y: [200, 400, 170, 330] },
                        { x: new Date(15387822e5), y: [330, 340, 250, 280] },
                        { x: new Date(1538784e6), y: [300, 330, 200, 320] },
                        { x: new Date(15387858e5), y: [320, 450, 280, 350] },
                        { x: new Date(15387876e5), y: [300, 350, 80, 250] },
                        { x: new Date(15387894e5), y: [200, 330, 170, 300] },
                        { x: new Date(15387912e5), y: [200, 220, 70, 130] },
                        { x: new Date(1538793e6), y: [220, 270, 180, 250] },
                        { x: new Date(15387948e5), y: [200, 250, 80, 100] },
                        { x: new Date(15387966e5), y: [150, 170, 50, 120] },
                        { x: new Date(15387984e5), y: [110, 450, 10, 420] },
                        { x: new Date(15388002e5), y: [400, 480, 300, 320] },
                        { x: new Date(1538802e6), y: [380, 480, 350, 450] },
                    ],
                },
            ],
            xaxis: { type: "datetime", axisBorder: { show: !1 }, axisTicks: { show: !1 }, labels: { style: { fontSize: "13px" } } },
            yaxis: { tooltip: { enabled: !0 }, labels: { style: { fontSize: "13px" } } },
            grid: { xaxis: { lines: { show: !0 } }, padding: { top: -20 } },
            plotOptions: { candlestick: { colors: { upward: '#16a34a', downward: '#dc2626' } }, bar: { columnWidth: "40%" } },
        };
        var chart = new ApexCharts(document.querySelector("#candleStickChart"), options);
        chart.render();

        var options = {
            chart: { height: 380, type: "radialBar" },
            colors: ['#fee802', '#3fd0bd', '#2b9bf4'],
            plotOptions: {
                radialBar: {
                    size: 185,
                    hollow: { size: "40%" },
                    track: { margin: 10, background: '#e5e7eb' },
                    dataLabels: {
                        name: { fontSize: "2rem", fontFamily: "Public Sans" },
                        value: { fontSize: "1.2rem", color: '#4b5563', fontFamily: "Public Sans" },
                        total: {
                            show: !0,
                            color: '#4b5563',
                            fontWeight: 400,
                            fontSize: "1.3rem",
                            label: "Comments",
                            formatter: function (e) {
                                return "80%";
                            },
                        },
                    },
                },
            },
            grid: { borderColor: '#e5e7eb', padding: { top: -25, bottom: -20 } },
            legend: { show: !0, position: "bottom", labels: { useSeriesColors: !1 } },
            stroke: { lineCap: "round" },
            series: [80, 50, 35],
            labels: ["Comments", "Replies", "Shares"],
        };
        var chart = new ApexCharts(document.querySelector("#radialBarChart"), options);
        chart.render();
    </script>
</body>
</html>
